<template>
  <basic-dialog :visible="addEditDialog"
                minWidth="746px"
                :title="isEdit ? '编辑调度线': '新增调度线'"
                :isShowClose="false"
                @submit="submit"
                is-show-basic-footer
                :isShowInnerLoading="loading"
                @close="hideDialog">
    <div>
      <q-form ref="form" class="dialog-content" greedy>
        <q-card-section>
          <div class="flex">
            <q-input
              v-model.trim="addEditForm.name"
              dense
              outlined
              maxlength="30"
              placeholder="请输入调度线名称"
              :rules="[
              val => val && val.length > 0  || '请输入调度线名称'
            ]"
              class="q-field--with-bottom select-width margin-r-15"
            >
              <template v-slot:before>
                <label class="text-right name">
                  <span class="text-red">*</span>
                  <span>调度线名称:</span>
                </label>
              </template>
            </q-input>
            <q-select v-model="addEditForm.workshop"
                      :options="workshopOpt"
                      dense
                      options-dense
                      emit-value
                      map-options
                      outlined
                      :disable="isEdit"
                      placeholder="请选择车间"
                      class="select-width"
                      style="width: 268px"
                      :rules="[]">
              <template v-slot:no-option>
                <div class="no-option"/>
              </template>
              <template v-slot:before>
                <label class="text-right name label-width">
                  <span class="text-red">*</span><span>所在车间:</span>
                </label>
              </template>
            </q-select>
          </div>
          <div class="flex">
            <span class="name text-right" style="margin-right: 6px"><span class="text-red">*</span>调度线位置:</span>
            <div class="flex-1">
              <div class="content flex" style="padding: 0">
                <div class="box addBox flex items-center" v-for="(item, index) in linePosition" :key="item.deviceId">
                  {{ item.deviceName }}
                  <q-icon name="iconfont icontubiao-89" class="close-icon"  v-if="index !== linePosition.length" @click="deleteDevice(item.deviceId)"/>
                  <div class="arrow iconfont icontubiao-100" v-if="index !== linePosition.length"></div>
                </div>
                <div class="box add-btn" style="box-shadow: none" @click="addDevice">
                  <q-icon
                    name="iconfont icontubiao-39"
                    class="add-icon"
                  />
                  添加
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-form>

      <AddDevice ref="addDevice" :workshop="addEditForm.workshop" :selDevice="linePosition" :delDeviceIds="delDeviceIds" @success="selectDevice" />
    </div>
  </basic-dialog>
</template>

<script>
import AddDevice from './add-device'
import _ from 'lodash'
import { addDispatchingLine, updateDispatchingLine } from '../../../../boot/system/fixed-scheduling'

export default {
  name: 'add-edit-dialog',
  components: {
    AddDevice
  },
  props: {
    workshopOpt: {
      type: Array,
      default: () => []
    },
    lineData: {
      type: Object,
      default: null
    }
  },
  watch: {
    workshopOpt: {
      deep: true,
      handler: function (val) {
        if (val) {
          this.addEditForm.workshop = val[0].value
        }
      }
    },
    lineData: {
      deep: true,
      handler: function (val) {
        if (val) {
          this.addEditForm.name = val.dispatchingName
          this.addEditForm.id = val.id
          this.addEditForm.workshop = val.workshopId
          this.linePosition = _.cloneDeep(val.devices)
        } else {
          this.addEditForm.name = ''
          this.linePosition = []
          this.addEditForm.workshop = this.workshopOpt[0].value
        }
      }
    },
    'addEditForm.workshop': {
      handler: function (val) {
        if (!this.isEdit) {
          this.linePosition = []
        }
      }
    }
  },
  computed: {
    isEdit () {
      return !!(this.lineData && !!this.lineData.id)
    }
  },
  data () {
    return {
      addEditDialog: false,
      loading: false,
      workshopOptAll: [],
      addEditForm: {
        id: '',
        name: '',
        workshop: '',
        position: []
      },
      linePosition: [],
      deviceTemp: {},
      delDeviceIds: []
    }
  },
  methods: {
    addDevice () {
      this.$refs.addDevice.showDialog()
    },
    showDialog () {
      this.addEditDialog = true
      this.addEditForm.name = ''
      this.linePosition = []
      this.delDeviceIds = []
      this.addEditForm.workshop = this.workshopOpt[0].value
    },
    /**
     * 提交调度线
     */
    submit () {
      this.$refs.form.validate(true).then(result => {
        if (result) {
          if (this.linePosition.length === 0) {
            this.$message.warning('请添加调度线位置')
            return false
          }
          const params = {
            devices: this.linePosition.map((item, index) => ({ deviceId: item.deviceId, lineIndex: index })),
            dispatchingName: this.addEditForm.name,
            workshopId: this.addEditForm.workshop
          }
          this.loading = true
          if (this.isEdit) {
            params.id = this.addEditForm.id
            updateDispatchingLine(params).then(res => {
              if (res.code === '1200') {
                this.addEditDialog = false
                this.$emit('success')
              }
            }).finally(() => {
              this.loading = false
            })
          } else {
            addDispatchingLine(params).then(res => {
              if (res.code === '1200') {
                this.addEditDialog = false
                this.$emit('success')
              }
            }).finally(() => {
              this.loading = false
            })
          }
        }
      })
    },
    hideDialog () {
      this.addEditDialog = false
    },

    selectDevice (row) {
      this.linePosition.push({
        deviceId: row.id,
        deviceName: row.name
      })
    },

    deleteDevice (id) {
      this.linePosition = this.linePosition.filter(item => item.deviceId !== id)
      if (this.isEdit) {
        if (this.delDeviceIds.indexOf(id) === -1) {
          this.delDeviceIds.push(id)
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
/deep/ .dialog-content .name {
  width 100px
}
/deep/.q-btn .q-icon, .q-btn .q-spinner{
  font-size 1rem
}
.content {
  padding 20px

  .box {
    background #44D8C6
    box-shadow 0px 1px 5px 0px rgba(0, 0, 0, 0.15)
    border-radius 6px
    height 32px
    padding 0 20px
    color #fff
    font-size 16px
    line-height 32px
    font-weight 500
    position: relative
    margin-right 36px
    margin-bottom 12px

    .arrow {
      color #000
      font-size 22px
      position: absolute
      right -30px
      top 1px
    }

    .close-icon{
      margin-left 5px
      opacity 0.6
      line-height 32px
      cursor pointer
    }

    .add-icon{
      margin-right 8px
      margin-top -3px
    }
  }

  .addBox {
    background #F7B82D
  }

  .add-btn {
    background #FEFEFE
    border 1px dashed #999999
    font-weight 500
    color #999999
    cursor pointer
    user-select none
  }
}
</style>
